/*
 *工作台页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import {analysisJson,endexData,projectData,adminUser,dynamic} from '@app/constants/DataSource.jsx';
import { Row, Col, Tabs, Button, Icon, Card, Avatar, Breadcrumb, Progress, List, Spin, Divider } from 'antd';
import './Workbench.css';
import $ from 'jquery';

class Workbench extends Component {
	constructor(props) {
		super(props);
		let positionId = localStorage.getItem('userPosition');
		let position = '';
		if(positionId === '1')position = '系统管理员';
    if(positionId === '2')position = '分析员';
    if(positionId === '3')position = '项目管理员';
    if(positionId === "4")position = '财务';
    if(positionId === '5')position = '净化员';
    if(positionId === '6')position = '其他';
		this.state = {
			loading:true,
			loadingMore1: false,
			loadingMore2: false,
	    showLoadingMore1: true,
	    showLoadingMore2: true,
	    data: dynamic,
	    position:position,
	    dataSource:[]
		};
	}

	componentDidMount(){
		setTimeout(() => {
		this.setState({loading:false});
		let dataSource = [];
    $.get('http://localhost:3000/projectList',(json) =>{
        if(json.status === '0'){
          dataSource = json.data;
          dataSource.map(value => {
            value.key = value.project_id;
          });
          dataSource.reverse();
          this.setState({dataSource});
        }
    });

    $.get('http://localhost:3000/dynamicList',(json) =>{
    	 if(json.status === '0'){
          dataSource = json.data;
          dataSource.map(value => {
            value.key = value.dynamic_id;
          });
          dataSource.reverse();

          this.setState({data:dataSource});
        }
    });
		},300);
	}

	onLoadMore1 = () => {
    this.setState({
      loadingMore1: true,
    });
   	setTimeout(() => {
			this.setState({loadingMore1:false});
		},300);
  }

  onLoadMore2 = () => {
    this.setState({
      loadingMore2: true,
    });
   	setTimeout(() => {
			this.setState({loadingMore2:false});
		},300);
  }
   
  render() { 	
  	const gridStyle = {
			textAlign: 'center',
			height:150
		};
		
		let dataHe = [];
		let userName = localStorage.getItem('user');
		const { loading, loadingMore1, loadingMore2, showLoadingMore1, showLoadingMore2, data } = this.state;
		data.map(value => {
			if(value.report === userName){
				dataHe.push(value);
			}
		});

    const loadMore1 = showLoadingMore1 ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore1 && <Spin />}
        {!loadingMore1 && <Button type="primary" onClick={this.onLoadMore1}>更多</Button>}
      </div>
    ) : null;
    const loadMore2 = showLoadingMore2 ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore2 && <Spin />}
        {!loadingMore2 && <Button type="primary" onClick={this.onLoadMore2}>更多</Button>}
      </div>
    ) : null;

    //项目卡片
		const Card_Grid = [];
  	for(let i = 0;i<6;i++){
  		if(this.state.dataSource[i]){
		    let status = 'normal';
		    if(this.state.dataSource[i].state === 0){
		      status='active';
		    }else if(this.state.dataSource[i].state === 1){
		      status='exception';
		    }else if(this.state.dataSource[i].state ===2){
		      status = 'success';
		    }
    		Card_Grid.push(
					<Card.Grid style={gridStyle} key = {'Card.Grid'+i} style = {{paddingBottom:20}}>
						<Link to = {'/ProjectInfo?key='+i}>
							<div className = 'xiangmu'>
								<Avatar style={{ backgroundColor: this.state.dataSource[i].color, verticalAlign: 'middle' }}>
				        	{this.state.dataSource[i].title.substr(3,2)}
				        </Avatar>
			        	<span className = 'titleItem'>{this.state.dataSource[i].title}</span>
			        	<Progress percent={this.state.dataSource[i].process} status={status}/>
			        	<div style = {{marginTop:10,fontSize:10,color:'#999'}}>
			        		{this.state.dataSource[i].name}
			        		<Divider type="vertical" style = {{height:10,top:0}}/>
			        		{this.state.dataSource[i].endDate}
			        	</div>
			       	</div>
		       	</Link>
			    </Card.Grid>
    		)
  		}
  	}

		return (
			<div className = 'workbench'>
				<Row gutter = {16}>
					<Col span = {24}>
						<Card style = {{height:180}}>
							<Breadcrumb>
						    <Breadcrumb.Item><Link to='/Analysis'>首页</Link></Breadcrumb.Item>
						    <Breadcrumb.Item>工作台</Breadcrumb.Item>
						  </Breadcrumb>
						  <Row gutter = {16}>
						  	<Col span = {3} className = 'touxiang'>
						  		<Avatar icon="user" style = {{height:80,width:80,borderRadius: 40}}/>
						  	</Col>
						  	<Col span = {9}>
						  		<div className = 'biaoti'>
							  		<div>你好，{localStorage.getItem('user')}</div>
							  		<div>{this.state.position} | 浙江省－杭州市－上城区</div>
						  		</div>
						  	</Col>
						  	<Col span = {11} style = {{paddingTop:30,textAlign:'right'}}>
						  		<div className = 'statItem'>
						  			<p>项目数</p>
						  			<p>{this.state.dataSource.length}</p>
						  		</div>
						  		<Divider type="vertical" />
						  		<div className = 'statItem'>
						  			<p>队伍编号</p>
						  			<p>ZHS-0{localStorage.getItem('userDepament')}</p>
						  		</div>
						  		<Divider type="vertical" />
						  		<div className = 'statItem'>
						  			<p>队伍排名</p>
						  			<p>{endexData[localStorage.getItem('userDepament')-1].key}/{endexData.length}</p>
						  		</div>
						  	</Col>
						  </Row>
						</Card>
					</Col>
					<Col span = {16} style = {{paddingTop:20}}>
						<Card title="我的项目" extra={<Link to="/ProjectTeam">全部项目</Link>} loading = {this.state.loading}>
					   	{Card_Grid}
					  </Card>
					  <Card title="动态" loading = {this.state.loading} className = 'infoList' style = {{marginTop:20}}>
							<List
				        className="demo-loadmore-list"
				        loading={loading}
				        itemLayout="horizontal"
				        loadMore={loadMore1}
				        dataSource={data}
				        renderItem={item => (
				          <List.Item
										 actions={[<span>上城区</span>,<span>{item.dynamic_date}</span>]}
				          >
				            <List.Item.Meta
				              avatar={<Avatar icon="user" />}
				            />
				            <div><Link to={"/ProjectInfo?key="+item.project_id}>{item.name}</Link>{item.action}日报</div>
				          </List.Item>
				        )}
				      />
						</Card>
					</Col>
					<Col span = {8} style = {{paddingTop:20}}>
						<Card title="和我有关" loading = {this.state.loading} className = 'infoList'>
							<List
				        className="demo-loadmore-list"
				        loading={loading}
				        itemLayout="horizontal"
				        loadMore={loadMore2}
				        dataSource={dataHe}
				        renderItem={item => (
				        	item.flag ? 
				          <List.Item
										actions={[<span>{item.dynamic_date.substr(11)}</span>]}
				          >
				            <List.Item.Meta
				              avatar={<Avatar icon="user" />}
				            />
				             <div><Link to={"/ProjectInfo?key="+item.project_id}>{item.name}</Link>{item.action}日报</div>
				          </List.Item>
				        : <span></span>)}
				      />
						</Card>
					</Col>
				</Row>
			</div>
		);
	}
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
  	
  }
)(Workbench)
